1 00:00:00,810 --> 00:00:02,030 On one welcome. 2 00:00:02,040 --> 00:00:12,390 In this video we are going to add the singer for our project cybercafes email far we've already got 3 00:00:12,480 --> 00:00:17,550 a reference to the externals here says far enough. 4 00:00:17,550 --> 00:00:25,470 Call it hitched come to see assess someone to create that file now by going to file option and clicking 5 00:00:25,470 --> 00:00:26,370 on. 6 00:00:26,930 --> 00:00:38,540 And I'm going to save that to the same directory as the hey team help file some of. 7 00:00:38,730 --> 00:00:40,950 Hey converter. 8 00:00:41,340 --> 00:00:48,610 Same name but change the file extension to see SS and click see. 9 00:00:49,020 --> 00:00:52,110 So I now have a csx file. 10 00:00:52,260 --> 00:01:01,820 If you see on the bottom right here it says see SS I have already priestley's to see SS Somewhere in 11 00:01:02,330 --> 00:01:07,700 and then run through the code with you in the right quick pace. 12 00:01:07,770 --> 00:01:11,950 So this is the CSA So I'm going to start from the top. 13 00:01:12,180 --> 00:01:14,490 So here is the container. 14 00:01:14,520 --> 00:01:21,410 This content is what we are stimy is an idea here so I go into my hastier mail. 15 00:01:21,660 --> 00:01:28,020 You see I've got one quart container which is deep here dastards. 16 00:01:28,080 --> 00:01:36,600 I am applying this styling too so you can see here these are the various properties and values given 17 00:01:36,630 --> 00:01:38,950 to the container. 18 00:01:39,860 --> 00:01:41,460 Giving it a whiff. 19 00:01:41,550 --> 00:01:43,860 Three hundred seventy five pixels. 20 00:01:43,860 --> 00:01:51,390 I will strongly encourage you to play around with these values Tran add your own values so as to customize 21 00:01:51,390 --> 00:01:57,150 it to your own text margin from the left. 22 00:01:57,150 --> 00:02:08,400 This is the left so from the left of the page I want the contain Deve to move 350 pixels and I also 23 00:02:08,400 --> 00:02:14,100 want to move from the top one at a drop down from the top. 24 00:02:14,100 --> 00:02:23,100 This is the top I wanted to move down from the top of the page 65 pixels in the background colour of 25 00:02:23,880 --> 00:02:24,870 black. 26 00:02:24,870 --> 00:02:27,470 This here is black. 27 00:02:27,560 --> 00:02:33,060 If you don't want to use hexadecimal column values you can just put the name on the collar. 28 00:02:33,060 --> 00:02:36,120 If you know the colour you want to use it. 29 00:02:36,200 --> 00:02:40,480 This could have just typed in black padding to the left. 30 00:02:40,470 --> 00:02:48,180 Padding refers to this space inside the element so this place is development while margin refers to 31 00:02:48,180 --> 00:02:50,730 the space outside div element. 32 00:02:50,730 --> 00:02:59,730 Some say the padding inside from the left I want it to move 30 pixels law is white. 33 00:02:59,730 --> 00:03:04,110 This is hex decimal values for the colour white. 34 00:03:04,320 --> 00:03:08,940 So if you want to type in an M alkaline state you can do that. 35 00:03:09,550 --> 00:03:19,330 Here refers to the text so any text you have inside is div will have the colour of whites. 36 00:03:19,920 --> 00:03:25,240 So let's move on to the stylin of the feet. 37 00:03:25,590 --> 00:03:31,230 So we go into to our Tim Farley far you can see this impled field here. 38 00:03:31,260 --> 00:03:33,240 Got an idea your feet. 39 00:03:33,240 --> 00:03:35,460 That's what I am referring to here. 40 00:03:35,760 --> 00:03:45,420 So again I'm giving that input field with hundred and fifty pixels height 25 pixels margin from the 41 00:03:45,420 --> 00:03:51,160 top 30 pixels margin from the left 15 pixels. 42 00:03:51,160 --> 00:03:55,420 Again I've applied the same to the inches I do. 43 00:03:55,450 --> 00:04:00,290 So going to email this input here quad inches. 44 00:04:00,460 --> 00:04:03,200 I've given it the same value. 45 00:04:03,240 --> 00:04:06,400 Next let's move on to the result. 46 00:04:06,420 --> 00:04:13,060 This is where the value of the conversion is going to be posted. 47 00:04:13,380 --> 00:04:17,520 So here we've got a divided court result. 48 00:04:17,860 --> 00:04:19,770 So this is what I'm referring to here. 49 00:04:19,820 --> 00:04:29,190 Given the font size 35 pixels the margin from the left 60 pixels the colour of the text is going to 50 00:04:29,190 --> 00:04:30,720 be yellow. 51 00:04:31,230 --> 00:04:33,820 So moving on to the submit button. 52 00:04:34,290 --> 00:04:41,000 If I click on the TMF I can see we've got an input type submit. 53 00:04:41,340 --> 00:04:45,720 So this is frame to the submit input. 54 00:04:45,780 --> 00:04:57,000 So here again giving me your with off 250 pixels height 35 pixels margin to the left 20 pixels margin 55 00:04:57,000 --> 00:04:59,580 from the top 25 pixels. 56 00:04:59,970 --> 00:05:08,120 Old radios five picks a body radios basically gives gives it a kind of less rounded edge. 57 00:05:08,150 --> 00:05:14,330 So I've given it five pixels so you can also play around with value so you can see how. 58 00:05:14,420 --> 00:05:17,800 Depending on how round you want the edges to be. 59 00:05:18,140 --> 00:05:20,400 Does style have set it on nonso. 60 00:05:20,480 --> 00:05:26,310 Sometimes you can have borders that are have a shadow border shadow on and so on. 61 00:05:26,330 --> 00:05:31,490 I'm just saying here I don't want any styling on the border style so that's why I've said the value 62 00:05:31,490 --> 00:05:40,060 to not giving the background colour of these submit input and giving it read the actual law. 63 00:05:40,070 --> 00:05:50,630 White collar basically refers to the text inside the submit import field here font size under frame 64 00:05:50,660 --> 00:05:57,520 to the full size of the text inside the submit button or submit input. 65 00:05:57,770 --> 00:06:00,750 That's going to be 25 pixels. 66 00:06:00,830 --> 00:06:05,900 Finally what the hey want to hear the hate from basically is this one here. 67 00:06:05,990 --> 00:06:17,360 This is the title of the hall converter and I've given it a pound to the left 15 pixels padding from 68 00:06:17,360 --> 00:06:27,840 the top 25 pixels or padding creates space inside by a margin refers to the space outside. 69 00:06:27,910 --> 00:06:34,700 Inside the container I am giving this space to the left and from the top. 70 00:06:34,820 --> 00:06:41,340 So I'm just going to say this and then quickly run the file so we can see what it looks like. 71 00:06:41,570 --> 00:06:47,930 So let's double click directories here and run his team five times on a double click. 72 00:06:48,200 --> 00:06:54,770 He can see his look in a bit more presentable or done nothing is going to work because we have not added 73 00:06:54,770 --> 00:06:58,720 the javascript functionality in the next lecture. 74 00:06:58,850 --> 00:07:06,290 We are going to be adding the javascript functionality that will do the heavy lifting in making this 75 00:07:06,290 --> 00:07:08,250 converter to work. 76 00:07:08,420 --> 00:07:10,000 Thank you for watching. 77 00:07:10,020 --> 00:07:10,730 Bye for now.